<template>
    <div>
        <el-tree ref="tree" :data="data" show-checkbox node-key="id" :default-expanded-keys="[2, 3]"
            :default-checked-keys="this.form.menuId" :props="defaultProps">
        </el-tree>
    </div>
</template>
<script>
import { Find } from '@/api/RoleMenu'
import { Add } from '@/api/RoleMenu'
import { List } from '@/api/menu'
export default {
    data() {
        return {
            form: {
                menuId: [],
                roleId: '',
            },
            data: [],
            defaultProps: {
                children: 'children',
                label: 'menuName'
            }
        }
    },
    props: {
        Rid: {
            type: Number
        }
    },
    methods: {
        AddRoleMenu() {
            this.form.menuId = this.$refs.tree.getCheckedKeys();
            console.log(this.$refs.tree.getCheckedKeys());
            console.log(this.form.menuId)
            //let add = this.$refs.tree.getHalfCheckedKeys();
            // add.forEach(e => {
            //     console.log(e);
            //     this.form.menuId.push(e);
            // })
            Add(this.form).then(res => {
                if (res) {
                    this.$message.success("权限分配成功");
                    location.reload();
                    return;
                } else {
                    this.$message.error("权限分配失败");
                    return;
                }
            })
        },
        FindRoleMenu() {
            Find(this.form.roleId).then(res => {
                this.form.menuId = res.data;
                console.log(this.form.menuId)
            })
        },
        getmenu() {
            List().then(res => {
                this.data = res.data;
                console.log(this.AddRoleMenu);
            })
        },
    },
    created() {
        this.form.roleId = this.Rid;
        this.FindRoleMenu();
        this.getmenu();
    }
}
</script>
<style>
.icon-picker {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.icon-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.icon {
    font-size: 24px;
    margin: 5px;
    cursor: pointer;
}

.selected {
    background-color: #007bff;
    color: #fff;
    border-radius: 50%;
    padding: 3px;
}

.el-cascader-menu__wrap {
    height: 204px;

}

.el-cascader {
    width: 100%;
}
</style>